<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 <script src='../../../assets/js/jquery-2.0.3.min.js'></script>

<style type="text/css"> 
 .divAll{ 
   width:800px; 
   font-family:'黑体'; 
   margin:50px auto; 
   }
 #titles{ 
   font-weight:bold; 
   font-size:18px; 
   height:50px; 
   line-height:50px; 
   background:#FFF9F3; 
   text-align:center;  
   border:1px solid #CCC;; 
   }
 #contents{ 
    margin-top:20px; 
    background:#FFF9F3; 
    border:1px solid #CCC;; 
    }
  #form-itemGroup{ 
   padding:10px;  
    }
  #form-itemGroup label{ 
    display:inline-block; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    color:#666; 
    text-align:right; 
    }
  #form-itemGroup .userName{ 
    width:200px; 
    height:40px; 
    line-height:40px; 
    border:1px solid #CCC; 
    }  
  #form-itemGroup .default{ 
    width:200px; 
    height:32px; 
    line-height:32px; 
    color:#999; 
    } 
  #form-itemGroup .error{ 
    height:32px; 
    line-height:32px; 
    color:#F00; 
    }
  #form-itemGroup .success{ 
    height:32px; 
    line-height:32px; 
    color:#096; 
    }  
  .divBtn{ 
    margin-top:20px; 
    margin-left:200px; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    background-color:#F93; 
    margin-bottom:10px; 
    color:#ffffff; 
    font-weight:bold; 
    border:none; 
    } 
</style>

  <div class="breadcrumbs" id="breadcrumbs">
	<script type="text/javascript">
		try {
			ace.settings.check('breadcrumbs', 'fixed')
		} catch (e) {}
	</script>

	<ul class="breadcrumb">
		<li><i class="icon-home home-icon"></i> <a href="../../../index.jsp">首页</a>
		</li>

		<li>用户管理</li>
		<li class="active">添加用户</li>
	</ul>
	<!-- .breadcrumb -->

	<div class="nav-search" id="nav-search">
		<form class="form-search">
			<span class="input-icon"> <input type="text"
				placeholder="Search ..." class="nav-search-input"
				id="nav-search-input" autocomplete="off" /> <i
				class="icon-search nav-search-icon"></i>
			</span>
		</form>
	</div>
	<!-- #nav-search -->
</div>


<div class="page-content">
	<div class="page-header">
		<h1>
			添加用户
		  </h1>
	  </div>

	
		
			  
			  <div > 
				   <div> 
				   <form action="./userInsert" onSubmit="return checkForm()"> 
				    <div id="form-itemGroup"> 
				      <label for="userName">用户名：</label> 
				      <input type="text" name="username"  id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> 
				      <span class="default" id="nameErr">请输入至少3位的用户名</span> 
				    </div>
				     <div id="form-itemGroup"> 
				      <label for="userPasword">角色：</label> 
				      <%-- <c:forEach items="${roles }" var="r">
										  <input type="checkbox" name="userrole" value="${r.key }" style="width: 20px; height: 17px; "/>${r.value }
									   </c:forEach> --%>
				      
				    </div> 
				    <div id="form-itemGroup"> 
				      <label for="userPasword">密码：</label> 
				      <input type="password" name="password"  id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> 
				      <span class="default" id="passwordErr">请输入4到8位的密码</span> 
				    </div> 
				    <div id="form-itemGroup"> 
				      <label for="userConfirmPasword">确认密码：</label> 
				      <input type="password" name="password1"   id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> 
				      <span class="default" id="conPasswordErr">请再输入一遍密码</span> 
				    </div> 
				    <div id="form-itemGroup"> 
				      <label for="userPhone">手机号码：</label> 
				      <input type="text" name="telephone"   id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> 
				      <span class="default" id="phoneErr">请输入11位手机号码</span> 
				    </div>
				    <div id="form-itemGroup"> 
				      <label for="userPhone">备注：</label> 
				      
				      <textarea rows="5" cols="50" name="userDescription">
				      </textarea>
				      
				    </div>
				     
				    <div style="margin-left: 12%;"> 
				     <button type="submit" class="btn btn-primary">保存</button>
				     <button type="button" class="btn btn-primary">返回</button>  
				    </div> 
				   </form> 
				   </div> 
			  </div>

			
		
	</div>
	<!-- /.row -->

<!-- /.page-content -->

<script type="text/javascript"> 
 function checkForm(){ 
  var nametip = checkUserName(); 
  var passtip = checkPassword();  
  var conpasstip = ConfirmPassword(); 
  var phonetip = checkPhone(); 
  return nametip && passtip && conpasstip && phonetip; 
  } 
  //验证用户名   
  function checkUserName(){ 
  var username = document.getElementById('userName'); 
  var errname = document.getElementById('nameErr'); 
  var pattern = /^\w{3,}$/;  //用户名格式正则表达式：用户名要至少三位 
  if(username.value.length == 0){ 
    errname.innerHTML="用户名不能为空"
    errname.className="error"
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    errname.innerHTML="用户名不合规范"
    errname.className="error"
    return false; 
    } 
   else{ 
     errname.innerHTML="OK"
     errname.className="success"; 
     return true; 
     } 
  } 
  //验证密码   
function checkPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var errPasswd = document.getElementById('passwordErr'); 
  var pattern = /^\w{4,8}$/; //密码要在4-8位 
  if(!pattern.test(userpasswd.value)){ 
    errPasswd.innerHTML="密码不合规范"
    errPasswd.className="error"
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK"
     errPasswd.className="success"; 
     return true; 
     } 
  } 
  //确认密码 
  function ConfirmPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var userConPassword = document.getElementById('userConfirmPasword'); 
  var errConPasswd = document.getElementById('conPasswordErr'); 
  if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ 
    errConPasswd.innerHTML="上下密码不一致"
    errConPasswd.className="error"
    return false; 
    } 
   else{ 
     errConPasswd.innerHTML="OK"
     errConPasswd.className="success"; 
     return true; 
     }    
  } 
//验证手机号 
  function checkPhone(){ 
  var userphone = document.getElementById('userPhone'); 
  var phonrErr = document.getElementById('phoneErr'); 
  var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 
  if(!pattern.test(userphone.value)){ 
    phonrErr.innerHTML="手机号码不合规范"
    phonrErr.className="error"
    return false; 
    } 
   else{ 
     phonrErr.innerHTML="OK"
     phonrErr.className="success"; 
     return true; 
     } 
  } 
</script>

